<template>
	<div id="app">
		<el-card shadow="always">
			<div style="float: left;font-weight: bolder;">挂号信息</div>

			<!-- 展示挂号人信息 -->
			<el-table :data="tableData" border style="width: 100%;margin-top: 20px;">
				<el-table-column fixe prop="guahaoUpdateTime" label="日期" width="150"></el-table-column>
				<el-table-column prop="guaId" label="挂号单号" width="50"></el-table-column>
				<el-table-column prop="patientName" label="姓名" width="120">
					<template slot-scope="scope">
						<el-popover trigger="hover" placement="top">
							<p>性别: {{ scope.row.patientGender }}</p>
							<p>年龄: {{ scope.row.patientAge }}</p>
							<p>电话：{{scope.row.patientTel}}</p>
							<p>身份证号：{{scope.row.patientIdCard}}</p>
							<div slot="reference" class="name-wrapper">
								<el-tag size="medium">{{ scope.row.patientName }}</el-tag>
							</div>
						</el-popover>
					</template>
				</el-table-column>
				<el-table-column prop="status" label="状态" width="120">
				</el-table-column>
				<el-table-column prop="symptom" label="症状" width="300"></el-table-column>
				<el-table-column prop="diaResult" label="诊断结果" width="300"></el-table-column>
				<el-table-column label="项目检查" width="100">
					<template slot-scope="scope">
						<el-button type="primary" icon="el-icon-document-add" size="mini" circle
							@click="handleGetProject(scope.row,scope.$index)"></el-button>
					</template>
				</el-table-column>
				<el-table-column label="处方单" width="100">
					<template slot-scope="scope">
						<el-button type="primary" icon="el-icon-document-add" size="mini" circle
							@click="handleGetMedicine(scope.row,scope.$index)"></el-button>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="160" fixed="right">
					<template slot-scope="scope">

						<el-button @click="handleEdit(scope.row,scope.$index)" type="text" size="small"
							icon="el-icon-edit" :disabled="scope.row.btn1==0">编辑</el-button>
						<!-- <el-button type="text" icon="el-icon-s-promotion" :disabled="scope.row.btn2==0">提交</el-button> -->
					</template>
				</el-table-column>
			</el-table>


			<!-- 打开编辑,完善病例信息 -->
			<el-dialog title="完善病例信息" :visible.sync="dialogFormVisible">
				<el-form :model="form">
					<el-form-item label="症状" :label-width="formLabelWidth">
						<el-input v-model="form.symptom" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="诊断结果" :label-width="formLabelWidth">
						<el-input v-model="form.result" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="状态" :label-width="formLabelWidth">
						<el-select v-model="form.status" placeholder="请选择">
							<el-option label="待诊" value="待诊"></el-option>
							<el-option label="就诊" value="就诊"></el-option>
							<el-option label="已诊" value="已诊"></el-option>
							<el-option label="挂起" value="挂起"></el-option>
							<el-option label="销号" value="销号"></el-option>
						</el-select>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="addInformation">确 定</el-button>
				</div>
			</el-dialog>

		</el-card>
		<!-- （1） 分页组件，数据绑定到pageData对象 -->
		<!-- （4）监听当前页码改变事件 -->
		<el-pagination background layout="prev, pager, next" :total="pageData.total" :page-size="pageData.size"
			:current-page="pageData.current" @current-change="handleChange">
		</el-pagination>


	</div>

</template>

<script>
	export default {
		name: "GetRegister",
		methods: {
			handleGetMedicine(row, index) {
				//将修改后的病人状态和症状添加数据库,并路由跳转到项目划价页
				this.$http.post("http://localhost:8088/modifyStatusAndSymptom", {
						guaId: this.form.id,
						symptom: this.form.symptom,
						status: this.form.status,
						diaResult: this.form.result,

					})
					.then(response => {
						console.log(response);
						console.log(row.guaId);
						if (response.data.data == 1) {
							this.$message({
								message: '恭喜你，这是一条成功消息',
								type: 'success'
							});
						}
						this.find();
						//跳转到药品划价界面
						console.log(row);
						this.$router.push({
							name: 'GetMedicine',
							params: {
								guaId: row.guaId
							}
						})
					})
					.catch(error => {
						console.log(error);
					})
			},
			handleGetProject(row, index) {
				//将修改后的病人状态和症状添加数据库,并路由跳转到项目划价页
				this.$http.post("http://localhost:8088/modifyStatusAndSymptom", {
						guaId: this.form.id,
						symptom: this.form.symptom,
						status: this.form.status,
						diaResult: this.form.result,

					})
					.then(response => {
						console.log(response);
						console.log(row.guaId);
						if (response.data.data == 1) {
							this.$message({
								message: '恭喜你，这是一条成功消息',
								type: 'success'
							});
						}
						this.find();
						//跳转到项目划价界面
						console.log(row);
						this.$router.push({
							name: 'GetProject',
							params: {
								guaId: row.guaId
							}
						})
					})
					.catch(error => {
						console.log(error);
					})
			},
			handleChange(data) {
				//修改当前页面并发起新的查询
				console.log(data);
				this.pageData.current = data;
				this.find();
			},
			addInformation() {
				for (let i = 0; i < this.tableData.length; i++) {
					if (this.form.id == this.tableData[i].guaId) {
						this.tableData[i].symptom = this.form.symptom;
						console.log(this.tableData[i].result);
						console.log(this.form.result);
						this.tableData[i].diaResult = this.form.result;
						this.tableData[i].status = this.form.status;
						// alert("编辑成功");
					}
				}
				this.$message({
					message: '更改成功',
					type: 'success'
				});
				this.dialogFormVisible = false;
			},
			handleEdit(row, index) {
				console.log(row);
				this.dialogFormVisible = true;
				this.form.id = row.guaId;
				this.form.symptom = row.symptom;
				this.form.result = row.diaResult;
				this.form.status = row.status;
			},
			changeValue(index, row) {
				console.log("=================")
				console.log(row);
			},
			find() {
				console.log(this.tableData)
				this.$http.get("http://localhost:8088/queryInformationOfGuaHao", {
						params: {
							current: this.pageData.current,
							doctorId: localStorage.getItem("doctorId")
						}
					}) //携带当前叶面数据
					.then(response => {
						console.log(response);
						if (response.data.data != null) {
							//3.查询，返回分页相关数据，赋值给pageData
							Object.assign(this.pageData, response.data.data);
							this.tableData = response.data.data.records;
						}
					})
					.catch(error => {
						console.log(error)
					})
			}
		},
		mounted() {
			this.find()
		},
		data() {
			return {
				tableData: [],
				form: {
					id: '',
					symptom: '',
					result: '',
					status: ''
				},
				// 2. 存储分页数据
				pageData: {
					total: 1,
					size: 3,
					current: 1
				},
				dialogFormVisible: false,
				formLabelWidth: '120px',
				//flag:true
			}
		}
	}
</script>

<style>


</style>